import './StudentVideoPlayPage.scss'
import { DoubleLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import PlayListItem from './componets/PlayListItem/PlayListItem';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { fetchGetVideoList } from '@/store/modules/student';
import { getVideoAPI,videoFinishAPI } from '@/apis/student';
import { setUserStatus } from '@/store/modules/user';

const listItemInfo = {
    courseName: "视频名称",
    ifFinish: true
}

const itemList = [];

for (let i = 0; i < 20; i++) {
    itemList.push(<PlayListItem key={i} itemInfo={listItemInfo} />);
}

function StudentVideoPlayPage() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user_status } = useSelector(state => state.user);
    const { videoList } = useSelector(state => state.student);
    const [videoSrc, setVideoSrc] = useState(null);

    useEffect(() => {
        async function getVideoList() {
            await dispatch(fetchGetVideoList(user_status.class_id, user_status.token));
        }

        getVideoList();

        const filename = user_status.video_url.split('=')[1];

        async function getVideo() {
            const res = await getVideoAPI({
                filename,
                class_id: user_status.class_id
            }, user_status.token)
            const videoURL = URL.createObjectURL(res.data);
            setVideoSrc(videoURL);
        }


        getVideo();

    }, [])

    function backToVideoList() {
        navigate('/studentcourse');
    }

    const handleEnded = async () => {
        console.log('end');
        const index =  videoList.findIndex(ele => ele.video_id === user_status.video_id);
        const res = await videoFinishAPI(user_status.video_id,user_status.token);
        console.log(res);
        if(index + 1 >= videoList.length ){
            navigate('/studentcourse');
        }else{
            await dispatch(setUserStatus({
                ...user_status,
                video_url:videoList[index + 1].video_url,
                video_id:videoList[index + 1].video_id
            }))
            window.location.reload();
        }
    }


    return (
        <div className="StudentVideoPlayPage">
            <header>
                <button onClick={backToVideoList}>
                    <DoubleLeftOutlined />
                    返回
                </button>
                <div>
                    <h1>视频标题</h1>
                    <span>所属课程</span>
                </div>
            </header>
            <main>
                <video controls onEnded={handleEnded}>
                    {videoSrc && <source
                        src={videoSrc}
                        type="video/mp4"
                    />}
                </video>
            </main>
            <ul>
                {videoList.length === 0 || videoList.map(
                    (ele, index) => <PlayListItem key={index} itemInfo={ele} />
                )}
            </ul>
        </div>
    )
}

export default StudentVideoPlayPage;